<!DOCTYPE html>
<html>
<head>
<title>Diagram of a rotating charged ring</title>
<style>
  body {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    background-color: white;
    border: 1px solid #ffffff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Define parameters
  const centerX = 250;
  const centerY = 230;
  const radiusX = 180;
  const radiusY = 60;

  // Set default styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';

  // 1. Draw the ring (ellipse)
  ctx.beginPath();
  ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
  ctx.stroke();

  // 2. Draw the coordinate axes
  // x-axis (vertical)
  ctx.beginPath();
  ctx.moveTo(centerX, centerY + radiusY);
  ctx.lineTo(centerX, centerY - 160);
  ctx.stroke();
  // Arrowhead for x-axis
  ctx.beginPath();
  ctx.moveTo(centerX, centerY - 160);
  ctx.lineTo(centerX - 6, centerY - 150);
  ctx.moveTo(centerX, centerY - 160);
  ctx.lineTo(centerX + 6, centerY - 150);
  ctx.stroke();

  // Radius line (horizontal)
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + radiusX, centerY);
  ctx.stroke();

  // 3. Draw point 'a'
  const aY = centerY - 100;
  ctx.beginPath();
  ctx.arc(centerX, aY, 4, 0, 2 * Math.PI);
  ctx.fill();

  // 4. Draw rotation arrow
  ctx.save();
  ctx.lineWidth = 1.5;
  // Curved arrow line
  const arrowStartY = centerY + 35;
  const arrowStartX = centerX - 80;
  const arrowEndX = centerX + 80;
  const arrowControlY = arrowStartY + 25;
  ctx.beginPath();
  ctx.moveTo(arrowStartX, arrowStartY);
  ctx.quadraticCurveTo(centerX, arrowControlY, arrowEndX, arrowStartY);
  ctx.stroke();
  // Arrowhead for rotation
  ctx.beginPath();
  ctx.moveTo(arrowEndX, arrowStartY);
  ctx.lineTo(arrowEndX - 10, arrowStartY - 5);
  ctx.moveTo(arrowEndX, arrowStartY);
  ctx.lineTo(arrowEndX - 10, arrowStartY + 5);
  ctx.stroke();
  ctx.restore();


  // 5. Add labels
  ctx.font = 'italic 24px "Times New Roman"';
  ctx.textAlign = 'left';

  // Label 'O'
  ctx.fillText('O', centerX - 28, centerY + 8);
  // Label 'R'
  ctx.fillText('R', centerX + radiusX - 40, centerY - 8);
  // Label 'x'
  ctx.fillText('x', centerX + 12, centerY - 150);
  // Label 'a'
  ctx.fillText('a', centerX + 15, aY + 8);
  
  // Label 'ω'
  ctx.textAlign = 'center';
  ctx.fillText('ω', centerX, centerY + 85);

  // 6. Add caption
  ctx.font = '24px "KaiTi", "SimSun", sans-serif'; // Use a common Chinese font
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.fillText('习题 8－20 图', centerX, 420);

</script>
</body>
</html>